<!--用cesium 渲染二维地图-->
<template>
  <div class="hs-index scale-wrap">
    <!-- <Video v-if="isShowVideo" @close="isShowVideo = false" :videoObj="detail"></Video> -->
    <Earth2 ref="baseMap" @cesiumLoad="cesiumLoad" @clickIcon="clickIcon"></Earth2>

    <div class="bg">
      <HeadBox title="设备一张图"></HeadBox>
      <div class="main">
        <el-col :span="6">
          <div class="contetn-left">
            <ItemWrap style="height: 82vh" title="核酸检测点">
              <pictorialBar :pointList="pointList" v-if="isShowPoint"></pictorialBar>
            </ItemWrap>
          </div>
        </el-col>
        <el-col :span="6" :offset="12">
          <div class="contetn-right">
            <ItemWrap style="height: 40vh" title="核酸检测时间">
              <timePie :timeList="timeList" v-if="isShowTime"></timePie>
            </ItemWrap>
            <ItemWrap style="height: 41vh; margin-top: 20px; pointer-events: all" title="确诊病例">
              <dv-scroll-board :config="config" ref="table1" style="height: calc(100% - 15px)" @click="skipto" />
            </ItemWrap>
          </div>
        </el-col>
      </div>
    </div>
    <div id="maptools">
      <ul class="bar">
        <li @mouseover="handleOver()">
          <i class="icon icon-layer"> </i>
          <div class="menu-drop-wrap" ref="menuDropRef" @mouseout="handleOut()">
            <ul class="menu-list">
              <li v-for="item in mapDropdownList" :key="item.name">
                <el-checkbox v-model="item.isCheck" @change="changeCheckBox()" /><span>{{ item.name }}</span>
              </li>
            </ul>
          </div>
        </li>
        <li><i class="icon icon-point" @click="handleReset(3)"></i></li>
        <li><i class="icon icon-plug" @click="handlePlug(1)"></i></li>
        <li><i class="icon icon-reduce" @click="handlePlug(2)"></i></li>
      </ul>
    </div>
  </div>
</template>
<script>
import pictorialBar from './echarts/pictorialBar.vue'
import timePie from './echarts/timePie.vue'
import Earth2 from '@/components/Earth/index2.vue'
import Video from '@/components/video/index.vue'
// import Mapview from '@/components/map-container/index.vue'
export default {
  components: {
    Earth2,
    // Mapview,
    Video,
    pictorialBar,
    timePie,
  },
  data() {
    return {
      isShowVideo: false,
      viewer: null,
      center: [120.432144, 36.147497],
      map: null,
      // resAmap: null,
      infoWindow: null,
      config: {
        header: ['地点', '时间'],
        data: [['<span style="color:#9fe6b8;"></span>', '23']],
        headerHeight: 40,
        headerBGC: '#0f1325', //表头
        oddRowBGC: '#0f1325', //奇数行
        evenRowBGC: '#171c33', //偶数行
        index: true,
        columnWidth: [45, 150],
        align: ['center'],
      },
      timeList: [], // 核酸检测时间
      isShowTime: false,
      pointList: [], //核酸检测点
      isShowPoint: false,
      mapDropdownList: [
        {
          isCheck: false,
          name: '摄像头',
          nums: 0,
          data: [],
        },
      ],
    }
  },
  created() {
    this.getDetectionPoint()
    this.getDetectionTime()
    this.getCaseData()
  },
  mounted() {
    // this.getQueryPoint('')
  },
  methods: {
    mapLoad(amap) {
      this.map = amap
    },
    cesiumLoad(viewer) {
      this.viewer = viewer
    },
    /*
     * 获取所有点位
     * typeId: 7:愿检尽检  9:区域核酸检测
     */
    getQueryPoint() {
      let params = {
        lat: 36.166174,
        lng: 120.432288,
        distance: 1000,
      }
      this.$get('/csynvideourl/queryPoint', params).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        let data = res.data
        let mapMarkerList = []
        if (!this.map) {
          return
        }
        this.map.clearMap()
        var icon = {
          // 图标类型，现阶段只支持 image 类型
          type: 'image',
          // 图片 url
          image: require('@/assets/image/icon/video.png'),
          // 图片尺寸
          size: [32, 33],
          // 图片相对 position 的锚点，默认为 bottom-center
          anchor: 'center',
        }
        mapMarkerList = data.map((item) => {
          // let marker = new AMap.Marker({
          //   position: [item.longitude, item.latitude],
          //   size: new AMap.Size(55, 48), // 图标尺寸
          //   icon: item.icon, //上面定义的你的图标样式在这儿
          //   offset: new AMap.Pixel(0, 0), //点位的偏移量
          //   extData: item,
          // })
          let labelMarker = new AMap.LabelMarker({
            name: '', // 此属性非绘制文字内容，仅最为标识使用
            position: [item.longitude, item.latitude],
            zIndex: 16,
            icon: icon,
            extData: item,
          })
          labelMarker.on('click', this.markerClick)
          return labelMarker
          // 将创建的点标记添加到已有的地图实例：
        })
        this.map.add(mapMarkerList)
      })
    },
    //点位点击事件，展示信息窗体
    markerClick(e) {
      // let self = this
      // let data = e.target.content
      var left = e.pixel.x
      var top = e.pixel.y
      console.log(left, top)
      this.detail = e.target._opts.extData
      this.isShowVideo = true
    },
    // 监听复选框
    changeCheckBox() {
      let array1 = [],
        array2 = [],
        array3 = ''
      array1 = this.mapDropdownList.filter((tag) => tag.isCheck)
      array2 = array1.map((item) => {
        return item.typeId
      })
      array3 = array2.join(',')
      this.getQueryPoint()
    },
    // 统计核酸检测点
    getDetectionPoint() {
      this.$get('/hs/map/getDetectionPoint').then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.pointList = res.data
        this.isShowPoint = true
      })
    },
    // 统计核酸检测时间
    getDetectionTime() {
      this.$get('/hs/map/getDetectionTime').then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.timeList = res.data
        this.isShowTime = true
      })
    },
    // 统计确诊病例
    getCaseData() {
      //获取数据
      this.$get('/hs/map/getCase').then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        let dataList = res.data
        let resultList = []
        dataList.map((v, i) => {
          var item = ['', '']
          let colorCode = ''
          if (i % 2 == 0) {
            colorCode = '<span style="color:#9fe6b8;">'
          } else {
            colorCode = '<span style="color:#67e0e3;">'
          }
          item[0] = `${colorCode}${v.situs}</span>`
          item[1] = `${colorCode}${v.startTime}</span>`
          resultList.push(item)
        })
        this.config.data = resultList
        this.$refs['table1'].updateRows(resultList)
      })
    },
    // 鼠标移入
    handleOver() {
      this.$refs.menuDropRef.style.display = 'block'
    },
    // 鼠标移出
    handleOut() {
      this.$refs.menuDropRef.style.display = 'none'
    },
    // 鼠标放大缩小
    handlePlug(type) {
      let position = this.viewer.camera.position
      let cameraHeight = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height
      // 每次缩小 20 倍，参数可改
      let moveRate = cameraHeight / 20.0
      // 放大
      if (type === 1) {
        this.viewer.camera.moveForward(moveRate)
      } else {
        this.viewer.camera.moveBackward(moveRate)
      }
    },
    // 复位
    handleReset() {
      // this.viewer.camera.flyTo({
      //   destination: Cesium.Cartesian3.fromDegrees(104, 30, 15682725),
      // })
    },
    // 点击点位播放视频
    clickIcon(indexCode) {
      this.isShowVideo = true
      console.log('视频编码？？', indexCode)
    },
    skipto() {
      this.$router.push({
        path: '/yxgj-map',
      })
      // window.location.href = 'http://120.221.95.112:18083/lc-zhdp/#/'
    },
  },
}
</script>
<style lang="less" scoped>
#maptools {
  .icon-layer {
    background: url('../../assets/image/icon/icon1.png') top no-repeat;
  }
  .icon-point {
    background: url('../../assets/image/icon/icon2.png') top no-repeat;
  }
  .icon-plug {
    background: url('../../assets/image/icon/icon3.png') top no-repeat;
  }
  .icon-reduce {
    background: url('../../assets/image/icon/icon4.png') top no-repeat;
  }
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 997;
  background: url('../../assets/image/bg.png') top no-repeat;
  background-size: 100% 100%;
}

.main {
  display: flex;
  padding: 100px 50px 0;
  justify-content: space-between;
  height: 80vh;
}
#echarts1,
#echarts2 {
  height: 100%;
  pointer-events: all;
}

.jc-center {
  text-align: center;
}
</style>
